<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh">
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: "Microsoft YaHei", sans-serif;
    }

    .container {
        display: flex;
        flex-wrap: wrap;
        min-height: 100vh;
    }

    /* 顶部导航栏样式 */
    .top-nav {
        width: 100%;
        height: 60px;
        background-color: #2c3e50;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        position: fixed;
        top: 0;
        z-index: 100;
    }

    .logo {
        font-size: 20px;
        font-weight: bold;
    }

    .user-info {
        display: flex;
        gap: 20px;
    }

    .logout {
        color: white;
        text-decoration: none;
    }

    .logout:hover {
        text-decoration: underline;
    }

    /* 左侧导航栏样式 */
    .sidebar {
        width: 250px;
        background-color: #34495e;
        min-height: calc(100vh - 60px);
        margin-top: 60px;
        position: fixed;
    }

    .nav-menu {
        list-style: none;
        padding: 20px 0;
    }

    .nav-menu li a {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        color: white;
        text-decoration: none;
        transition: background-color 0.3s;
    }

    .nav-menu li a:hover {
        background-color: #2c3e50;
    }

    .icon {
        margin-right: 10px;
    }

    /* 主要内容区域样式 */
    .main-content {
        margin-left: 250px;
        margin-top: 60px;
        padding: 0;
        flex: 1;
        background-color: #f5f6fa;
        position: relative;
    }

    /* 添加 iframe 样式 */
    #mainFrame {
        width: 100%;
        height: calc(100vh - 60px);
        border: none;
        background-color: #f5f6fa;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .sidebar {
            width: 100%;
            position: static;
            min-height: auto;
        }

        .main-content {
            margin-left: 0;
            width: 100%;
        }
    }
</style>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教务管理系统</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
    <!-- 顶部导航栏 -->
    <nav class="top-nav">
        <div class="logo">教务管理系统</div>
        <div class="user-info">
            <span>欢迎，管理员</span>
            <a href="CM01_login.jsp" class="logout">退出</a>
        </div>
    </nav>

    <!-- 左侧导航栏 -->
    <div class="sidebar">
        <ul class="nav-menu">
            <li><a href="CM02_userEdit.jsp" target="mainFrame"><i class="icon">👤</i>个人设置</a></li>
            <li><a href="CM03_departmentList.jsp" target="mainFrame"><i class="icon">🏛️</i>二级学院管理</a></li>
            <li><a href="CM04_instructorList.jsp" target="mainFrame"><i class="icon">👨‍🏫</i>辅导员信息管理</a></li>
            <li><a href="CM05_classesListUser.jsp" target="mainFrame"><i class="icon">👥</i>班级信息管理</a></li>
            <li><a href="CM06_courseListUser.jsp" target="mainFrame"><i class="icon">📚</i>课程信息管理</a></li>
        </ul>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
        <iframe name="mainFrame" id="mainFrame" src="userWelcome.jsp" frameborder="0"></iframe>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 获取当前页面的 URL 参数
        const params = new URLSearchParams(window.location.search);
        const userId = params.get("userid"); // 从 URL 中获取 userid 参数

        if (userId) {
            // 动态更新“个人设置”的链接，添加 userid 参数
            const userEditLink = document.querySelector('a[href="CM02_userEdit.jsp"]');
            userEditLink.href = `CM02_userEdit.jsp?userid=`+userId;
        }
    });
</script>
</body>
</html>
